<template>
  <div>
    <div>
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="search.title" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item label="详情">
          <el-input v-model="search.details" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="dataList.computedList" border style="width: 100%">
      <el-table-column
        header-align="center"
        align="center"
        prop="title"
        label="标题"
        width="180"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="name"
        label="名字"
        width="180"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="details"
        label="详情"
      />
    </el-table>
    <el-pagination
      @current-change="currentChange"
      @size-change="sizeChange"
      layout="prev, pager, next"
      :total="search.count * 2"
    />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  computed,
  watch
} from 'vue'
import { getGoodsList } from '../request/api'
import { goodsList, goodsInt } from '../type/goods'

export default defineComponent({
  setup() {
    const data = reactive(new goodsList())

    onMounted(() => {
      getGoods()
    })

    const getGoods = () => {
      getGoodsList()
        .then((res) => {
          data.list = res.data.list
          data.search.count = res.data.list.length
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const dataList = reactive({
      computedList: computed(() => {
        return data.list.slice(
          (data.search.page - 1) * data.search.pageSize, //page=1  -->0 ,page=2 -->10
          data.search.page * data.search.pageSize //page=1 --> 10 , page=2 --> 20
          //  0-9
          // 10-19
        )
      })
    })

    const currentChange = (page: number) => {
      data.search.page = page
    }

    const sizeChange = (pageSize: number) => {
      data.search.pageSize = pageSize
    }

    const onSubmit = () => {
      console.log(data)
      console.log('submit!')

      // 定义数组 用来用来接收查询后要战术的数据
      let arr: goodsInt[] = []
      // 判断两个输入框是否有值
      if (data.search.title || data.search.details) {
        if (data.search.title) {
          arr = data.list.filter((value) => {
            return value.title.indexOf(data.search.title) !== -1
          })
        }

        if (data.search.details) {
          arr = data.list.filter((value) => {
            return value.details.indexOf(data.search.details) !== -1
          })
        }
      } else {
        arr = data.list
      }
      data.search.count = arr.length
      data.list = arr
    }

    // 监听当输入框都为空时，表格数据初始化
    watch([() => data.search.title, () => data.search.details], () => {
      if (data.search.title == '' && data.search.details == '') {
        getGoods()
      }
    })

    return { ...toRefs(data), onSubmit, currentChange, sizeChange, dataList }
  }
})
</script>

<style scoped></style>
